import { DatePicker, Input, InputNumber, Select, Switch } from 'antd';
import { getMessage } from '@inbiz/react';
export enum InputTypeEnum {
  Text = 1,
  Number = 3,
  Date = 4,
  Select = 5,
  Switch = 6,
  CardTmplSelect = 7,
}

export const Option = {
  auth: [
    {
      label: 'add',
      value: 'add',
    },
    {
      label: 'edit',
      value: 'edit',
    },
    {
      label: 'delete',
      value: 'del',
    },
  ],
  paramField: [{ label: 'ID', value: 'id' }],
  position: [
    { label: getMessage('Tag.tableHeader'), value: 'tableHeader' },
    { label: getMessage('Tag.inline'), value: 'inline' },
  ],
  openMode: [
    { label: getMessage('Tag.popUpWindow'), value: 'modal' },
    // { label: '新页面', value: 'page' },
    { label: getMessage('Tag.drawers_up'), value: 'top' },
    { label: getMessage('Tag.drawers_down'), value: 'bottom' },
    { label: getMessage('Tag.drawers_left'), value: 'left' },
    { label: getMessage('Tag.drawers_right'), value: 'right' },
  ],
  yesOrNo: [
    { value: '1', label: getMessage('Tag.yes') },
    { value: '0', label: getMessage('Tag.no') },
  ],
  fixed: [
    { value: 'left', label: getMessage('Tag.left') },
    { value: 'right', label: getMessage('Tag.right') },
    { value: 'none', label: getMessage('Tag.no') },
  ],
  sorter: [
    { value: 'on', label: getMessage('Tag.open') },
    { value: 'off', label: getMessage('Tag.close') },
  ],
  toolbarDisplayQty: [
    { value: 1, label: getMessage('Tag.previous1') },
    { value: 2, label: getMessage('Tag.previous2') },
    { value: 3, label: getMessage('Tag.previous3') },
    { value: 4, label: getMessage('Tag.previous4') },
    { value: 5, label: getMessage('Tag.previous5') },
    { value: 6, label: getMessage('Tag.previous6') },
    { value: 7, label: getMessage('Tag.previous7') },
    { value: 8, label: getMessage('Tag.previous8') },
  ],
  actionGroups: [
    { value: 1, label: getMessage('Tag.groupName1') },
    { value: 2, label: getMessage('Tag.groupName2') },
    { value: 3, label: getMessage('Tag.groupName3') },
    { value: 4, label: getMessage('Tag.groupDate_functionConfig_action') },
  ],
  actionDisplaySetup: [
    { value: 'text', label: getMessage('Tag.writing') },
    { value: 'icon', label: getMessage('Tag.icon') },
    { value: 'iconText', label: getMessage('Tag.icon_writing') },
  ],
  size: [
    { value: 30, label: 30 },
    { value: 60, label: 60 },
    { value: 90, label: 90 },
  ],
  suffixOfUnit: [
    { value: '%', label: '%' },
    { value: 'px', label: 'px' },
  ],
  pageSize: [
    { value: 10, label: 10 },
    { value: 20, label: 20 },
    { value: 30, label: 30 },
    { value: 50, label: 50 },
    { value: 100, label: 100 },
  ],
  unitOfWidth: [
    { value: 'px', label: getMessage('Tag.pixel') },
    { value: '%', label: getMessage('Tag.percentage') },
  ],
  parentAction: [
    { value: 'add', label: getMessage('Tag.btn.adden') },
    { value: 'view', label: getMessage('Tag.btn.search') },
    { value: 'edit', label: getMessage('Tag.btn.edith') },
  ],
  actionType: [
    { value: 'save', label: getMessage('Tag.save') },
    { value: 'saveAndNew', label: getMessage('Tag.saveAndAdd') },
    { value: 'pre', label: getMessage('Tag.previous') },
    { value: 'next', label: getMessage('Tag.next') },
    { value: 'cancel', label: getMessage('Tag.btn.cancel') },
    { value: 'custom', label: getMessage('Tag.custom') },
  ],
};

export enum UnitEnum {
  percentage = '%',
  pixel = 'px',
}

export const InputTypeMap: { [key: number]: any } = {
  [InputTypeEnum.Text]: Input,
  [InputTypeEnum.Number]: InputNumber,
  [InputTypeEnum.Date]: DatePicker,
  [InputTypeEnum.Select]: Select,
  [InputTypeEnum.Switch]: Switch,
  // [InputTypeEnum.CardTmplSelect]: CardTmplSelect,
};

const FormConfig = () => {
  return {
    formItems: [
      {
        name: 'width',
        label: getMessage('Tag.windowWidth'),
        changeType: (value: string) => {
          return value === 'px' ? InputTypeEnum.Number : InputTypeEnum.Select;
        },
        initInputType: (values: { width: { widthSuffix: string } }) => {
          return values?.width?.widthSuffix === 'px' ? InputTypeEnum.Number : InputTypeEnum.Select;
        },
        children: [
          {
            name: 'widowWidth',
            inputType: InputTypeEnum.Select,
            defaultValue: 30,
            options: Option.size,
            needChangeType: true,
            proportion: '67%',
          },
          {
            name: 'widthSuffix',
            inputType: InputTypeEnum.Select,
            defaultValue: UnitEnum.percentage,
            options: Option.suffixOfUnit,
            proportion: '33%',
          },
        ],
      },
      {
        name: 'height',
        label: getMessage('Tag.windowHeight'),
        changeType: (value: string) => {
          return value === 'px' ? InputTypeEnum.Number : InputTypeEnum.Select;
        },
        initInputType: (values: { height: { heightSuffix: string } }) => {
          return values?.height?.heightSuffix === 'px'
            ? InputTypeEnum.Number
            : InputTypeEnum.Select;
        },
        children: [
          {
            name: 'windowHeight',
            inputType: InputTypeEnum.Select,
            defaultValue: 30,
            options: Option.size,
            needChangeType: true,
            proportion: '67%',
          },
          {
            name: 'heightSuffix',
            inputType: InputTypeEnum.Select,
            options: Option.suffixOfUnit,
            proportion: '33%',
          },
        ],
      },
    ],
  };
};

export default FormConfig;
